<template>
	<div class="jiangshan">
		<div class="home_body_banner" ref='bannerHeight'>
			<img src="../../../../static/img/images/wd_ewm1.jpg" />
		</div>
		<div class="yuan">
			<div class="jiang_logo clear2" ref='logoHeight'>
				<img src="../../../../static/img/images/logo.jpg" />
				<p @click="jump2">前往注册<i class="el-icon-arrow-right"></i></p>
			</div>
			<div class=" jiang_body" :style="{'min-height':minHeight+'px'}">
				<img src="../../../../static/img/images/yuanbj.jpg" class="jiang_body_bj"   />
				<div class="jiang_body_yuan clear2" ref='yuan' :style="{'height':yuanWidth+'px'}">
					<img class="img2" :src="yuanUrl" :style="{'transform':'rotate('+rotate+'deg)'}" />
					<img class="img3" :src="yuanUrl" v-if='rotateShow' />
					<img class="img4" src="../../../../static/img/images/yuan4.png"  />
					<div class="jiang_body_yuanDiv" @click="zhuan(0)"></div>	
					<div class="jiang_body_yuanDiv" @click="zhuan(0)"></div>	
					<div class="jiang_body_yuanDiv" @click="zhuan(0)"></div>	
					<div class="jiang_body_yuanDiv" @click="zhuan(1)"></div>	
					<div @click="jump" class="jiang_body_yuanDiv jiang_body_yuanDivZc flex flex_flow align_center justify_cen">
						<img src="../../../../static/img/images/yuan5_2.png" />
						<p>登录</p>
					</div>
					<div class="jiang_body_yuanDiv" @click="zhuan(2)"></div>		
					<div class="jiang_body_yuanDiv" @click="zhuan(1)"></div>	
					<div class="jiang_body_yuanDiv"></div>	
					<div class="jiang_body_yuanDiv" @click="zhuan(2)"></div>	
					
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		
		data: function() {
			
			return {
				yuanUrl:'../../../../static/img/images/yuan2.png',
				bodyHeight:0,
				yuanWidth:0,
				logoHeight:0,
				minHeight:0,
				rotate:0,
				dType:1,
				rotateShow:true,
			}
		},
		mounted() {
			setTimeout(()=>{
				this.yuanWidth=this.$refs.yuan.offsetWidth;
				this.logoHeight=this.$refs.logoHeight.offsetHeight;
				this.minHeight=document.body.offsetHeight-this.$refs.bannerHeight.offsetHeight-this.logoHeight;
			},0)
			setTimeout(()=>{
				this.minHeight=document.body.offsetHeight-this.$refs.bannerHeight.offsetHeight-this.logoHeight;
			},100)
        	this.bodyHeight=document.body.offsetHeight;
		},
		methods: {
			jump(key){
				if(this.peopleList.shop_id==''||this.peopleList.shop_id==null){
					this.Toast('请先注册');
					return false;
				}
				this.$router.push({
        			path: '/wode/manage',
				})
			},
			jump2(){
				this.$router.push({
        			path: '/jiang',
				})
			},
			zhuan(type){
				let html_list=[];
				
				if(parseInt(type)==0){
					return false;
				}
				this.rotateShow=false;
				switch(parseInt(type)){
					case 1:
						this.rotate+=120;
						if(this.dType==1){
							this.dType=2
						}
						else if(this.dType==2){
							this.dType=3
						}
						else if(this.dType==3){
							this.dType=1
						}
						
						break;
					case 2:
						this.rotate-=120;
					
						if(this.dType==1){
							this.dType=3
						}
						else if(this.dType==3){
							this.dType=2
						}
						else if(this.dType==2){
							this.dType=1
						}
						
						break;
				}
				this.imgList=html_list;
				setTimeout(()=>{
					if(this.dType==1){
					this.yuanUrl='../../../../static/img/images/yuan2.png';
					}
					if(this.dType==3){
						this.yuanUrl='../../../../static/img/images/yuan23.png';
					}
					if(this.dType==2){
						this.yuanUrl='../../../../static/img/images/yuan22.png';
					}
					this.rotate=0;
					this.rotateShow=true;
				},600)
				
			}
			
		}
	}
</script>

<style scoped>
	.home_body_banner{
		width: 100%;
	}
	.home_body_banner img{
		width: 100%;
		display: block;
	}
	.yuan{
		width: 100%;
		overflow: hidden;
	}
	.jiang_logo{
		width: 95%;
	    margin: 0 auto;
	    padding: 0 2.5%;
	    background: #fff;
	    border-bottom:0.1rem solid #e6e6e6;
	}
	.jiang_logo img{
		display: block;
	    float: left;
	    height: 4rem;
	    margin-left: -0.3rem;
	}
	.jiang_logo p{
		float: right;
		color: #7f7f7f;
		line-height: 4rem;
		font-size: 1.8rem;
	}
	.jiang_body{
		width: 100%;
		position: relative;
		background: url('../../../../static/img/images/yuanbj.jpg') repeat-y;
		background-size: 100%;
	}
	.jiang_body_bj{
		width: 100%;
		display: block;
	}
	.jiang_body_yuan{
		width: 66%;
		position: absolute;
		top: 50%;
		left: 50%;
		
		z-index: 1;
		transform: translate(-50%,-50%);
	}
	.jiang_body_yuan .img2{
		position: absolute;
		z-index: -10;
		top:0 ;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
		transform: rotate(0deg);
		transition: transform 0.5s;
	}
	.jiang_body_yuan .img3{
		position: absolute;
		z-index: 0;
		top:0 ;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
	}
	.jiang_body_yuan .img4{
		position: absolute;
		z-index: 1;
		top:50% ;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 43%;
		display: block;
	}
	
	.jiang_body_yuanDiv{
		width: 33%;
		height: 33%;
		float: left;
	}
	.jiang_body_yuanDiv:nth-child(3n-1){
		margin: 0 0.5%;
	}
	.jiang_body_yuanDiv img{
		display: block;
		width: 30%;
		margin: 0 auto;
	}
	.jiang_body_yuanDiv p{
		font-size: 1.3rem;
		color: #ababab;
		text-align: center;
		line-height: 2.5rem;
	}
	.jiang_body_yuanDivactive p{
		color: #f7bd40;
	}
	.jiang_body_yuanDivZc img{
		width: 40%;
	}
	.jiang_body_yuanDivZc p{
		font-size: 1.8rem;
		line-height: 3rem;
		font-weight: bold;
		color: #f7bd40;
	}
</style>